<template>

  <div>
    <MyHeader></MyHeader>
    <div>
      <p style="color: red;font-size: 25px;margin-top: 60px">全部书籍 {{ this.tableData.length }}</p>
      <div id="app" style="min-height: 400px; ">
        <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
        >
          <el-table-column
              label="全选"
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="bookname"
              label="图书信息"
              width="250"
              show-overflow-tooltip>
            <template #default="scope">

              {{ scope.row.book.bookname }}
            </template>
          </el-table-column>
          <el-table-column
              prop="price"
              label="单价"
              width="120">
            <template #default="scope">{{ scope.row.book.bookprice }}</template>
          </el-table-column>
          <el-table-column
              prop="number"
              label="数量"
              width="150"
              show-overflow-tooltip>
            <template #default="scope">
              <button @click="subBook(scope.row)">-</button>
              <input type="text" style="width: 50px" name="cartNum" id="cartNum"
                     v-model="scope.row.cart.bookNum"></input>
              <button @click="addBook(scope.row)">+</button>
            </template>
          </el-table-column>
          <el-table-column
              prop="total"
              label="总价"
              show-overflow-tooltip>
            <template #default="scope">{{ scope.row.cart.bookNum * scope.row.book.bookprice }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)">编辑
              </el-button>
              <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
      <div class="ss" align="center">
        <el-row>
          <el-col :span="4">
            <div class="grid-content bg-purple" style="margin-top: 10px">
              <el-checkbox type="" @click="selectAll" style="margin-left: 0; width: 30px" align="left"></el-checkbox>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple" style="margin-top: 10px;"><a @click="deleteBook(row)"> 删除</a>
              <a>移入收藏夹</a>
              <a>分享</a></div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light" style="margin-top: 10px;font-size: 18px">已选书籍<span
                style="color: red">{{ this.total }}</span>件
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple" style="font-size: 16px;margin-top: 10px">合计<span
                style="color: red">{{ this.totalPraces }}</span></div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content bg-purple-light">
              <el-button @click="toggleSelection()" style="background-color: red">下单</el-button>
            </div>
          </el-col>
        </el-row>

      </div>
    </div>
  </div>
</template>

<script>
//引入qs
import qs from "qs";

export default {
  name: "Cart",
  data() {
    return {
      total: 0,
      totalPraces: 0,
      isDisable: '',
      tableData: [
        {
          book: {
            "bookid": 111111,
            "bookname": "算法4",
            "booktype": "技术",
            "ebookaddress": "http://localhost/book/l",
            "isfree": 0,
            "isentity": 500,
            "howintegral": 30000,
            "bookprice": 300
          },
          cart: {
            "teId": 3,
            "userId": 1111,
            "bookId": 111111,
            "bookNum": 4,
            "cartId": "202103021458311111"
          }
        }
      ],
      userid: this.$store.getters.getUser.userid,
      multipleSelection: [],
      bookid: [],
      teid: []
    }
  },

  methods: {
    addBook(row) {
      row.cart.bookNum++;
      this.changeBookNum(row.cart.teId, +1);
      if (row.cart.bookNum > 1) {
        this.statusAdd = '';
      }
    },
    subBook(row) {
      if (row.cart.bookNum > 1) {
        row.cart.bookNum--;
        this.changeBookNum(row.cart.teId, -1);
      }
    },
    changeBookNum(row, num) {
      axios.get('http://localhost:8082/book-manager/cart/change?teid=' + row + '&num=' + num).then(function (resp) {
        console.log(resp.data)
      })
    },
    //查询个人购物车
    findAll() {
      var vm = this;
      axios.get('http://localhost:8082/book-manager/cart/list?userId=' + vm.userid).then(function (resp) {
        // console.log(resp.data)
        vm.tableData = resp.data
        console.log(vm.tableData)
      })
    },
    selectAll(val) {
      this.handleSelectionChange(val);
    },
    //下单
    toggleSelection(rows) {
      var orderData = {
        userId: this.userid,
        orderPrice: this.totalPraces,
        bookid: this.bookid,
        teid: this.teid
      }
      var vm = this
      axios({
        method: 'post',
        url: 'http://localhost:8082/book-manager/order/addOrder',
        data: qs.stringify(orderData)
      }).then(function (resp) {
        if (resp.data.flag == 'success') {
          //下单成功跳转付款页面
          console.log(resp.data)
          var pay = {
            orderId: resp.data.data,
            orderPrice: orderData.orderPrice
          }
          //下单成功跳转付款页面
          vm.$router.push({
            name: "Payment",
            params:pay
          })
        } else {
          //下单失败
        }
      })
    },
    //选择框
    handleSelectionChange(val) {
      this.total = 0;
      this.totalPraces = 0;
      this.multipleSelection = val;
      for (var i = 0; i < val.length; i++) {
        this.totalPraces += val[i].book.bookprice * val[i].cart.bookNum;
        this.bookid[this.total] = val[i].book.bookid
        this.teid[this.total] = val[i].cart.teId
        this.total++;
      }
      // console.log(this.multipleSelection)
    },
    handleDelete(index, row) {
      console.log(row)
      axios.delete('http://localhost:8082/book-manager/cart/delete?id=' + row.cart.teId).then(function (resp) {
        if (resp.data.flag == 'success') {
          alert(resp.data.message)
          location.reload();
        }
      })
    }
  },
  created() {
    this.findAll();
  }
}
</script>

<style scoped>
#app {
  width: 1200px;
  margin: 0 auto;
  margin-top: 70px;
}

a {
  padding-left: 50px;
  margin-left: 0px;
}

.ss {
  margin: 0 auto;
  background-color: #92B8B1;
  margin-bottom: 5px;
  text-align: left;
  width: 1200px;
}

el-table-column {
  background-color: #97a8be;
}
</style>
